<template>
  <div>
    <div class="topBtn">
      <div class="search">
        <span>角色：</span>
        <el-select
          v-model="user.select"
          placeholder="请选择角色名称"
          size="large"
          style="width: 240px"
          clearable
        >
          <el-option
            v-for="item in user.selectTheList"
            :key="item.roleName"
            :label="item.roleName"
            :value="item.roleName"
          />
        </el-select>
        <el-button @click="slect" type="success">查询</el-button>
      </div>
      <el-button type="primary" @click="(drawerRef.drawer = true), (drawerRef.showDrawer = true)"
        >添加</el-button
      >
    </div>
    <el-table :data="showData" style="width: 1200px">
      <!-- 表格 -->
      <el-table-column prop="id" label="用户id" width="150" />
      <el-table-column prop="username" label="用户名称" width="150" />
      <el-table-column prop="name" label="用户名称" width="150" />
      <el-table-column prop="phone" label="电话" width="150" />
      <el-table-column label="头像" width="240">
        <template #default="scope">
          <el-image
            v-if="scope.row.imgUrl"
            style="width: 55px; height: 55px"
            :src="base + scope.row.imgUrl"
            alt=""
            fit="cover"
          />
          <el-image
            v-else
            style="width: 55px; height: 55px"
            src="/src/assets/moren_tu.jpg"
            alt=""
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :total="user.data.length"
        v-model:current-page="pageIndex"
        :default-page-size="6"
      />
    </div>
    <userDrawer ref="drawerRef" :selectTheList="user.selectTheList" @get-user="getUser" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue'
import { getUserApi, getRoleNameApi, filterUserDatarApi } from '@/apis/user'
import userDrawer from '@/components/userDrawer.vue'

let user = reactive({
  data: [{}],
  selectTheList: [{ roleName: '' }],
  select: ''
})
onMounted(async () => {
  // 获取用户数据
  await getUser()
  // 获取角色名称选择框数据
  const res = await getRoleNameApi()
  user.selectTheList = res.result
})
// 获取用户数据
const getUser = async () => {
  let { result } = await getUserApi()
  user.data = result
}
const base = import.meta.env.VITE_APP_BASE_API
// 抽屉变量
const drawerRef = ref()

// 编辑
const handleEdit = async (row: any) => {
  let res = { ...row }
  // const { result } = await getIdUserApi({ id: row.id })
  // console.log(result[0])
  // 把数据传给子组件暴露出来的变量
  drawerRef.value.list = res
  drawerRef.value.showDrawer = true
  drawerRef.value.drawer = true
}
// 刪除
const handleDelete = (row: any) => {}
// 分页
const pageIndex = ref(1) // 页码
// 每一页显示的数据
let showData = computed(() => {
  return user.data.slice((pageIndex.value - 1) * 6, pageIndex.value * 6)
})

// 根据角色筛选
const slect = async () => {
  if (user.select === '' || user.select === undefined) {
    await getUser()
  } else {
    const { result } = await filterUserDatarApi({ name: user.select })
    user.data = result
  }
}
</script>

<style scoped lang="scss">
.topBtn {
  display: flex;
  align-items: center;
  .search {
    margin-right: 30px;
  }
}
</style>
